{% extends 'base.html' %}

{% load i18n %}

{% block extra_html_head_stuff %}
<script type="text/javascript" src="/static/js/wgo.min.js"></script>
<script type="text/javascript" src="/static/js/wgo.player.min.js"></script>
<link type="text/css" href="/static/css/wgo.player.css" rel="stylesheet" />
<link type="text/css" href="/static/css/wgo-custom.css" rel="stylesheet" />

<script>
window.addEventListener("load", function() {
  var gamePlayer = document.getElementById("gamePlayer");

  var dynamicLayout = [
    {
      conditions: {
        minWidth: 650,
    },
      layout: WGo.BasicPlayer.layouts["right_top"],
      className: "wgo-twocols wgo-large",
    },
    {
      conditions: {
        minWidth: 550,
        minHeight: 600,
      },
      layout: WGo.BasicPlayer.layouts["one_column"],
      className: "wgo-medium"
    },
    {
      conditions: {
        minWidth: 350,
      },
      layout: WGo.BasicPlayer.layouts["one_column"],
      className: "wgo-small"
    },
    {
      layout: WGo.BasicPlayer.layouts["one_column"],
      className: "wgo-xsmall",
    },
  ];

  var player = new WGo.BasicPlayer(gamePlayer, {
    sgfFile: "{{ game.sgf_file.url }}",
    board: { background: "#E8CF6D" },
    layout: dynamicLayout,
    allowIllegalMoves: true,
  });
  player.setCoordinates(true);
});
</script>

{% endblock extra_html_head_stuff %}


{% block title %}
{% trans "KataGo - Game ID" %} {{game.id}} (run {{game.run.name}})
{% endblock %}


{% block content %}

{% if kind == "rating" %}
<h1 class="title">{% trans "Rating Game ID" %} {{game.id}} ({% trans "run" %} {{game.run.name}}) </h1>
{% else %}
<h1 class="title">{% trans "Training Game ID" %} {{game.id}} ({% trans "run" %} {{game.run.name}}) </h1>
{% endif %}

<div id="gamePlayer" style="max-height:90vh">
  {% trans "WGo.js player did not initialize." %}
</div>

<p class="button my-4"><a href="{{ game.sgf_file.url }}">{% trans "Download SGF" %}</a></p>

<h2 class="title mt-5 is-4"> {% trans "Game Information" %} </h2>
<div class="content">
<ul>
<li> <strong>{% trans "Game ID" %}:</strong> {{ game.id }} </li>
<li> <strong>{% trans "Uploaded at" %}:</strong> {{ game.created_at|date:"Y-m-d H-i-s e" }} </li>
<li> <strong>{% trans "Submitted by" %}:</strong> {{ game.submitted_by }} </li>
{% if kind == "rating" %}
<li> <strong>{% trans "Black player" %}:</strong> {{ game.black_network.name }} </li>
<li> <strong>{% trans "White player" %}:</strong> {{ game.white_network.name }} </li>
{% else %}
<li> <strong>{% trans "Network used" %}:</strong> {{ game.black_network.name }} </li>
{% endif %}
<li> <strong>{% trans "BoardSizeX" %}:</strong> {{ game.board_size_x }} </li>
<li> <strong>{% trans "BoardSizeY" %}:</strong> {{ game.board_size_y }} </li>
<li> <strong>{% trans "Handicap" %}:</strong> {{ game.handicap }} </li>
<li> <strong>{% trans "Komi" %}:</strong> {{ game.komi }} </li>
<li> <strong>{% trans "Rules" %}:</strong> {{ game.rules }} <a href='https://lightvector.github.io/KataGo/rules.html'>{% trans "[rules explanation]" %}</a> </li>
<li> <strong>{% trans "Game Type" %}:</strong> {{ game.gametype }} </li>
<li> <strong>{% trans "Game Length (moves)" %}:</strong> {{ game.game_length }} </li>
<li> <strong>{% trans "Extra Metadata" %}:</strong> {{ game.extra_metadata }} </li>
<li> <strong>{% trans "Game Outcome" %}:</strong> {{ game.result_text }} </li>
<li> <strong>{% trans "Disabled" %}:</strong> {{ game.disabled }} </li>
</ul>
</div>
{% endblock content %}
